<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>体验团管理-成员管理</title>
	<link rel="icon" href="favicon.ico" type="image/ico">
	<meta name="keywords" content="体验团管理">
	<meta name="author" content="yinqi">
	<link href="/css/bootstrap.min.css" rel="stylesheet">
	<link href="/css/materialdesignicons.min.css" rel="stylesheet">
	<link href="/css/style.min.css" rel="stylesheet">

</head>
<body>


	<div class="row">
		<div class="col-lg-12">

			<div class="card">
				<div class="card-header"><h4>体验团管理-成员管理</h4></div>
				<div class="card-toolbar clearfix">
					<form class="pull-right search-bar" action='/tou/getAllTou' id="form3" method='post' role="form">
						<input type="hidden" name="page" id="pageNo" th:value="${page}">
						<table>
							<tr>
								<td th:width="100px">
									<label>
									<select name="cid" class="form-control" style="width: 120px;">
										<option value="0" > 选择类型 </option>
										<option value="1" th:selected="${queryObj.cid==1}"> 姓名 </option>
										<option value="2" th:selected="${queryObj.cid==2}" > 区县 </option>
										<option value="3" th:selected="${queryObj.cid==3}" > 地市 </option>
									</select>
								</label></td>
								<td th:width="30px"> </td>
								<td th:width="500px">
									<div class="input-group">
										<input type="text" class="form-control" th:value="${queryObj.getKeyword()}"
											   name="keyword" placeholder="请输入标题名称">
										<span class="input-group-btn">
                          <button class="btn btn-default" type="submit">查询</button></span>
									</div>
								</td>
							</tr>

<!--								<input type="hidden" name="search_field" id="search-field" value="title">-->


						</table>
					</form>
					<div class="toolbar-btn-action">
						<a class="btn btn-primary m-r-5" href="/tou/addTou" target="iframeMain"><i class="mdi mdi-plus"></i> 新增</a>
						<a class="btn btn-danger" href="javascript:delCus()" id="delCus"><i class="mdi mdi-window-close"></i> 删除</a>
					</div>
				</div>
				<div class="card-body">
					<form name="form2" id="fm3" action="/tou" method="post">
					<div class="table-responsive">
						<table class="table table-bordered">
							<thead>
							<tr>
								<th>
									<label class="lyear-checkbox checkbox-primary">
										<input type="checkbox" id="check-all" ><span></span>
									</label>
								</th>
								<th>序号</th>
								<th>姓名</th>
								<th>头像</th>
								<th>性别</th>
								<th>权限</th>
								<th>省份</th>
								<th>地市</th>
								<th>区县</th>
								<th>工作</th>
								<th>地址</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody>
							<tr th:each="tou : ${touPage.getRecords()}">

								<td>
									<label class="lyear-checkbox checkbox-primary">
										<input type="checkbox" name="userId" th:value="${tou.userId}"><span></span>
									</label>
								</td>
								<td th:text="${touStat.count}">1</td>
								<td th:text="${tou.name}"></td>
								<td><img th:src="${tou.touImg}" alt="没有头像" width="20px" height="20px"></td>
								<td th:text="${tou.sex}"></td>
								<td>
									<span th:if="${tou.isAdmin}==1">管理员</span>
									<span th:if="${tou.isAdmin}==0">用户</span></td>
								<td th:text="${tou.tbProvince.provinceName}"></td>
								<td th:text="${tou.tbCity.cityName}"></td>
								<td th:text="${tou.tbCounty.countyName}">36</td>
								<td th:text="${tou.job}"></td>
								<td th:text="${tou.address}"></td>
								<td>
									<div class="btn-group">
										<a class="btn btn-xs btn-danger" th:href="@{'/tou/delTouById?userId='+${tou.userId}}"  title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
									</div>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
					</form>
					<div class="pagination">

							<div id="myPage"></div>
							<link rel="stylesheet" type="text/css" href="/js/page/jquery.sPage.css">
						<script type="text/javascript"
								src="/js/jquery.min.js"></script>
						<script type="text/javascript"
								src="/js/page/jquery.sPage.min.js"></script>
						<script type="text/javascript" th:inline="javascript">
                            //初始化分页组件
                            /*var count =[[${touPage.getTotal()}]];
                            var size =[[${touPage.getSize()}]];
                            var pageNO =[[${touPage.getPages()}]];*/
                            //alert(count+"==="+size+"==="+pageNO);
                            $("#myPage").sPage({

                                page:[[${page}]],//当前页码，必填
                                total:[[${touPage.getTotal()}]],//数据总条数，必填
                                pageSize:[[${touPage.getSize()}]],//每页显示多少条数据，默认10条
                                totalTxt:"共"+[[${touPage.getTotal()}]]+"条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
                                showTotal:true,//是否显示总条数，默认关闭：false
                                showSkip:true,//是否显示跳页，默认关闭：false
                                showPN:true,//是否显示上下翻页，默认开启：true
                                prevPage:"上一页",//上翻页文字描述，默认“上一页”
                                nextPage:"下一页",//下翻页文字描述，默认“下一页”
                                backFun:function(page){
                                    //点击分页按钮回调函数，返回当前页码
									console.log(page);
                                    $("#pageNo").val(page);
                                    $("#form3").submit();
                                }
                            });

                            //回调方法:点击上一页和下一页
                            function handlePaginationClick(new_page_index, pagination_container) {
                                $("#pageNo").val(new_page_index + 1);
                                $("#form3").submit();
                            }

                            $(function () {
                                $("#check-all").click(function () {
                                    if(this.checked){
                                        $("input[name=userId]").prop("checked",true);
                                    }else {
                                        $("input[name=userId]").prop("checked",false);
                                    }

                                });
                                $("#checkrev").click(function () {
                                    $("input[name=userId]").each(function () {
                                        $(this).prop("checked",!$(this).prop("checked"))
                                    });
                                })
                            });

                            function delCus() {
                                $("#fm3").prop("action","/tou/delTou");
                                var len=$("input[name=userId]:checked").length;
                                if(len>0){
                                    if(confirm("你确定要删除吗?")){
                                        $("#fm3").submit();
                                    }
                                }else {
                                    alert("你还没有选中")
                                }
                            }
                            function exp() {
                                $("#fm3").prop("action","tou/expexl");
                                var len=$("input[name=userId]:checked").length;
                                if(len>0){
                                    if(confirm("是否要生成表格")){
                                        $("#fm3").submit();
                                    }
                                }else {
                                    alert("你还没有选中")
                                }
                            }
						</script>

					</div>

				</div>
			</div>
		</div>

	</div>


<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
</body>
</html>